import React, {FC} from 'react';
import "./index.less";
import {HxJournalMailItem} from "@/components/HxJournal";
import {Button, Form, Input, Space, Spin} from "antd";
import {KfFreeInputNumberRangePicker} from "kf-web-library";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {FormattedMessage} from "umi";


interface MallPageProps {
}

const MallPage: FC<MallPageProps> = (props) => {
  const [form] = Form.useForm();
  const journalsReq = useRequest((p) => API.queryFrontJournals({
    ...p,
    pageSize: 1000,
    sort: ["journal_sort,asc"],
  }));

  const data = journalsReq.data?.data || [];


  return (
    <div className={"mall-page-container"}>
      <div className={"mall-product-search"}>
        <Form
          form={form}
          className={"mall-product-search-form"}
          name="horizontal_login"
          layout="inline"
          onFinish={(values) => {
            journalsReq.run({
              searchText: values?.searchText,
              regularPriceStart: values?.priceRange?.[0],
              regularPriceEnd: values?.priceRange?.[1],
            })
          }}
        >
          <Form.Item
            label={<FormattedMessage id="mall.filter.JournalName"/>}
            name="searchText"
            rules={[{required: false}]}
          >
            <Input maxLength={60}/>
          </Form.Item>
          <Form.Item
            label={<FormattedMessage id="mall.filter.PriceRange"/>}
            name="priceRange"
            rules={[{required: false}]}
          >
            <KfFreeInputNumberRangePicker showTools={false}/>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button
                type="default"
                htmlType="reset"
              >
                <FormattedMessage id="text.reset"/>
              </Button>
              <Button
                type="primary"
                htmlType="submit"
              >
                <FormattedMessage id="text.filter"/>
              </Button>
            </Space>
            <span className={"search-result-desc"} style={{marginLeft: 12}}>
               <FormattedMessage
                 id="mall.filter.ResultDesc"
                 values={{count: journalsReq?.data?.total}}
               />
             </span>
          </Form.Item>

        </Form>
      </div>
      <div className={"mall-product-list"}>
        <Spin spinning={journalsReq.loading}>
          {
            journalsReq.data?.data?.map((journal: API.FrontJournal) => (
              <HxJournalMailItem key={journal.id} journal={journal}/>
            ))
          }
        </Spin>
      </div>
    </div>
  );
};

export default MallPage;
